<template>
    <div>
        <!--动态搜索-->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="电影名称">
                <el-input v-model="movieName" placeholder="请输入电影名称" :value="movieName"></el-input>
            </el-form-item>
            <el-form-item label="影院名称">
                <el-select v-model="cinemaId" placeholder="请选择影院">
                    <el-option :label="cinema.cinemaName" :value="cinema.cinemaId" v-for="cinema in cinemaList" :key="cinema.cinemaId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="影厅名称">
                <el-select v-model="htId" placeholder="请选择影厅">
                    <el-option :label="ht.htName" :value="ht.htId" v-for="ht in htList" :key="ht.htId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                        v-model="searchStartTime"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择开始日期时间">
                </el-date-picker>-
                <el-date-picker
                        v-model="searchEndTime"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择结束日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="pageSearch">查询</el-button>
            </el-form-item>
            <el-button type="primary" icon="el-icon-edit" circle @click="dialogVisible=true">添加</el-button>
        </el-form>
        <!--添加排片计划弹框-->
        <el-dialog
                :visible.sync="dialogVisible"
                width="50%">
            <el-form label-width="80px" ref="form" :model="schedule">
                <el-form-item label="电影名称">
                    <el-select v-model="schedule.movieId" placeholder="请选择电影名称" >
                        <el-option :label="movie.movieName" :value="movie.movieId" v-for="movie in movieList" :key="movie.movieId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="影院名称">
                    <el-select v-model="schedule.cinemaId" placeholder="请选择影院名称">
                        <el-option :label="cinema.cinemaName" :value="cinema.cinemaId" v-for="cinema in cinemaList" :key="cinema.cinemaId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="影厅名称">
                    <el-select v-model="schedule.htId" placeholder="请选择影厅名称">
                        <el-option :label="ht.htName" :value="ht.htId" v-for="ht in htList" :key="ht.htId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排片时间">
                    <el-col :span="11">
                        <el-date-picker type="datetime" placeholder="选择开始时间" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" v-model="schedule.startTime" @change="getStartTime" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-input v-model="schedule.endTime" disabled="true"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="计划票价">
                    <el-input v-model="schedule.price"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSchedule">确 定</el-button>
            </span>
        </el-dialog>
        <!--更新排片计划-->
        <el-dialog
                :visible.sync="u_dialogVisible"
                width="50%">
            <el-form :model="schedule_update">
                <el-form-item label="电影名称" :label-width="formLabelWidth">
                    <el-input v-model="schedule_update.movieName" :value="schedule_update.movieName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="影院名称" :label-width="formLabelWidth">
                    <el-select v-model="schedule_update.cinemaId" placeholder="请选择影院">
                        <el-option label="请选择" value="0"></el-option>
                        <el-option v-for="cinema in cinemaList" :label="cinema.cinemaName" :value="cinema.cinemaId" :key="cinema.cinemaId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="影厅名称" :label-width="formLabelWidth">
                    <el-select v-model="schedule_update.htId" placeholder="请选择影厅">
                        <el-option label="请选择" value="0"></el-option>
                        <el-option v-for="ht in htList" :label="ht.htName" :value="ht.htId" :key="ht.htId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="计划票价" :label-width="formLabelWidth">
                    <el-input v-model="schedule_update.schedulePrice" :value="schedule_update.schedulePrice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排片时间" :label-width="formLabelWidth">
                    <el-date-picker type="datetime" placeholder="选择开始时间" v-model="schedule_update.scheduleStartTime" style="width: 30%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" :value="schedule_update.scheduleStartTime" @change="getUpdateTime"></el-date-picker>-
                    <el-input type="datetime" v-model="schedule_update.scheduleEndTime" :value="schedule_update.scheduleEndTime" disabled="true" style="width: 30%"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-input type="hidden" :value="schedule_update.scheduleId"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="u_dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="modify">确 定</el-button>
            </span>
        </el-dialog>
        <!--排片结果列表展示-->
        <el-table
                :data="scheduleList"
                style="width: 100%"
                align="center">
            <el-table-column
                    prop="scheduleId"
                    label="编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="movieName"
                    label="电影名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="cinemaName"
                    label="影院名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="htName"
                    label="影厅名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="schedulePrice"
                    label="计划票价"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="scheduleStartTime"
                    type="datetime"
                    label="开始时间"
                    width="140">
            </el-table-column>
            <el-table-column
                    prop="scheduleEndTime"
                    type="datetime"
                    label="结束时间"
                    width="140">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[4,8,12,16]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>

    export default  {
        name: "schedule",
        data(){
            return {
                dialogVisible:false,
                schedule:{
                    movieId:"",
                    cinemaId:"",
                    htId:"",
                    startTime:"",
                    endTime:"",
                    price:""
                },
                pageNum:1,
                pageSize:6,
                movieName:"",
                cinemaId:0,
                htId:0,
                searchStartTime:"",
                searchEndTime:"",
                cinemaList:[],
                htList:[],
                movieList:[],
                scheduleList:[],
                total:0,
                u_dialogVisible:false,
                schedule_update:{},
                formLabelWidth: '120px',
            }
        },
        methods: {
            addSchedule(){
                let url="http://localhost:8083/schedule/add";
                this.axios.post(url,{
                    "movieId":this.schedule.movieId,
                    "cinemaId":this.schedule.cinemaId,
                    "htId":this.schedule.htId,
                    "startTime":this.schedule.startTime,
                    "endTime":this.schedule.endTime,
                    "price":this.schedule.price
                }).then((res)=>{
                    if(res.data.code==200){
                        this.dialogVisible=false;
                        this.pageSearch();
                    }
                })
            },
            pageSearch(){
                this.axios.get("http://localhost:8083/schedule/pageSearch",{
                    params:{
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        movieName:this.movieName,
                        cinemaId:this.cinemaId,
                        htId:this.htId,
                        startTime:this.searchStartTime,
                        endTime:this.searchEndTime
                    }
                }).then((res)=>{
                    if(res.data.code==200){
                        this.scheduleList=res.data.data.list;
                        this.pageNum=res.data.data.pageNum;
                        this.pageSize=res.data.data.pageSize;
                        this.total=res.data.data.total;
                    }
                })
            },
            findAllMovies(){
                this.axios.get("http://localhost:8083/MovieMudule/list")
                    .then((res)=>{
                        if(res.data.code==200){
                            this.movieList=res.data.data;
                        }
                    })
            },
            findAllCinemas(){
                this.axios.get("http://localhost:8083/cinema/cinemaList")
                    .then((res)=>{
                        if(res.data.code==200){
                            this.cinemaList=res.data.data;
                        }
                    })
            },
            findAllHallTypes(){
                this.axios.get("http://localhost:8083/hall/htList")
                    .then((res)=>{
                        if(res.data.code==200){
                            this.htList=res.data.data;
                        }
                    })
            },
            handleSizeChange(val){
                this.pageSize=val;
                this.pageSearch();
            },
            handleCurrentChange(val){
                this.pageNum=val;
                this.pageSearch();
            },
            handleEdit(index,row){

                this.u_dialogVisible=true;
                this.schedule_update=row;
            },
            modify(){
              let  url="http://localhost:8083/schedule/modify";
              this.axios.put(url,{
                  "scheduleId":this.schedule_update.scheduleId,
                  "movieId":this.schedule_update.movieId,
                  "cinemaId":this.schedule_update.cinemaId,
                  "htId":this.schedule_update.htId,
                  "price":this.schedule_update.schedulePrice,
                  "startTime":this.schedule_update.scheduleStartTime,
                  "endTime":this.schedule_update.scheduleEndTime,
              }).then((res)=>{
                  if(res.data.code==200){
                      this.u_dialogVisible=false;
                      this.pageSearch();
                  }
              })
            },
            handleDelete(index,row){
                let scheduleId=row.scheduleId;
                let url="http://localhost:8083/schedule/remove";
                this.axios.delete(url,{
                    params:{
                        "scheduleId":scheduleId }
                }).then((res)=>{
                    if(res.data.code==200){
                        this.pageSearch();
                    }
                })
            },
            getStartTime(){
                let movieId=this.schedule.movieId;
                let url="http://localhost:8083/schedule/getMovieTime";
                this.axios.get(url,{
                    params:{
                        movieId:movieId,
                        cinemaId:this.schedule.cinemaId,
                        htId:this.schedule.htId,
                        time:this.schedule.startTime
                    }
                }).then((res)=>{
                    if(res.data.code==200){
                        this.schedule.endTime=res.data.data;
                    }
                })
            },
            getUpdateTime(){
                let cinemaId=this.schedule_update.cinemaId;
                let htId=this.schedule_update.htId;
                let time=this.schedule_update.startTime;
                let movieId=this.schedule_update.movieId;
                let url="http://localhost:8083/schedule/modifyTime";
                    this.axios.get(url,{
                        params:{
                           cinemaId:cinemaId,
                           htId:htId,
                           time:time,
                            movieId:movieId
                        }
                    }).then((res)=>{
                        if(res.data.code==200){
                            this.schedule_update.endTime=res.data.data;
                        }
                    })
            }
        },
        created(){
            this.findAllMovies();
            this.findAllCinemas();
            this.findAllHallTypes();
            this.pageSearch();
        }
    }
</script>
<style>

</style>